import { useCallback, useEffect, useRef, useState } from "react"
import "./index.less"

export interface SwiperItemObject {
    image: string
    title?: string
    url?: string
}

export type SwiperItem = string | SwiperItemObject

export interface SwiperProps {
    className?: string
    width: number
    height: number
    interval?: number
    time?: number
    border?: number
    unit?: string
    bottomHeight?: number
    dotWidth?: number
    dotBorder?: number
    dotMargin?: number
    data: SwiperItem[]
}

export default ({ className, width, height, interval, time, border, unit, bottomHeight, dotWidth, dotBorder, dotMargin, data }: SwiperProps) => {
    interval = interval || 2000

    time = time || 500

    border = border || 16

    bottomHeight = bottomHeight || 35

    dotWidth = dotWidth || 10

    dotBorder = dotBorder || 4

    dotMargin = dotMargin || 8

    unit = unit || "px"

    const [index, setIndex] = useState(0)

    const length = data.length

    const indexRef = useRef(0)

    indexRef.current = index

    const getLength = (num: number) => `${num}${unit}`

    useEffect(() => {
        const timer = setTimeout(() => {
            setIndex((indexRef.current + 1) % length)
        }, interval)
        return () => {
            if (timer) {
                clearTimeout(timer)
            }
        }
    }, [index])

    const clickPrev = useCallback(() => {
        setIndex((indexRef.current + length - 1) % length)
    }, [])

    const clickNext = useCallback(() => {
        setIndex((indexRef.current + 1) % length)
    }, [])

    return (
        <div className="swiper-wrapper">
            {/* <div className="prev" onClick={clickPrev}>
                <img className="arrow-image" src="/left.svg" alt="前一个" />
            </div>
            <div className="next" onClick={clickNext}>
                <img className="arrow-image" src="/right.svg" alt="后一个" />
            </div> */}
            <div className="swiper" style={{ width: `${width + border * 2}${unit}`, height: `${height + border * 2}${unit}`, border: `${border}${unit} solid black`, borderRadius: `${2.5 * border}${unit}` }}>
                <div
                    className="image-wrapper"
                    style={{
                        left: `${-(index * width)}${unit}`,
                        transition: `all ${time}ms`
                    }}>
                    {data.map((item, index) => (
                        <div
                            key={index}
                            className="swiper-image"
                            style={{
                                backgroundImage: `url(${typeof item === "string" ? item : item.image})`
                            }}></div>
                    ))}
                </div>
                <div className="bottom-wrapper" style={{ height: `${bottomHeight}${unit}` }}>
                    {typeof data[index] !== "string" && <div className="title">{(data[index] as SwiperItemObject).title}</div>}
                    <div className="dot-wrapper">
                        {data.map((item, index) => (
                            <div key={index} className="dot" onClick={() => setIndex(index)} style={{ width: getLength(dotWidth! + dotBorder! * 2), height: getLength(dotWidth! + dotBorder! * 2), marginLeft: index && getLength(dotMargin!) }}>
                                <div className="dot-center" style={{ width: getLength(dotWidth!), height: getLength(dotWidth!) }}></div>
                            </div>
                        ))}
                        <div
                            className="bean"
                            style={{
                                width: getLength(dotWidth! + dotBorder! * 2),
                                height: getLength(dotWidth! + dotBorder! * 2),
                                left: getLength((dotWidth! + dotBorder! * 2 + dotMargin!) * index),
                                backgroundSize: `${getLength(dotWidth! + dotBorder! * 2)} ${getLength(dotWidth! + dotBorder! * 2)}`,
                                transition: `all ${time}ms`
                            }}></div>
                    </div>
                </div>
            </div>
        </div>
    )
}
